<template>
  <div class="index" v-loading="loading">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 任务行业查询 start -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.account" placeholder="工作室账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="createCount" style="background: #FF7C1E;border-radius: 4px;color: #FFFFFF;margin-bottom: 20px">创建账号</el-button>
<!--        <el-button @click="onSubmit" style="border-radius: 4px;border: 1px solid #00D355;color: #00D355;float: right">导出Excel</el-button>-->
      </div>
      <el-dialog title="创建账号" :visible.sync="dialogFormVisible" width="400px" v-loading="loadingD">
        <el-form :model="form"  :rules="rules" ref="form" >
          <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
            <el-input v-model="form.account" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="form.password" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="抽水比例" :label-width="formLabelWidth" prop="rate">
            <el-input v-model="form.rate" autocomplete="off" style="width: 200px">
              <i slot="suffix">%</i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="canelCount('form')">取 消</el-button>
          <el-button type="primary" @click="submitCount('form')">确 定</el-button>
        </div>
      </el-dialog>
<!--      表格-->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{background:'#d9d9d9', color: 'rgb(16, 116, 253)'}"
        @cell-mouse-enter="clickIndex"
        >
        <el-table-column
          prop="account"
          label="工作室账号">
        </el-table-column>
        <el-table-column
          prop="rate"
          label="抽水比例">
        </el-table-column>
        <el-table-column
          prop="dayIncome"
          label="单日收益">
        </el-table-column>
        <el-table-column
          prop="totalIncome"
          label="总收益">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          label="重置密码">
          <i class="el-icon-refresh" style="color: green" @click="resetChange"></i>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size=formInline.pageSize
        layout="total, prev, pager, next, jumper"
        :total=total
        style="text-align: center;margin-top: 20px">
      </el-pagination>
    </el-card>
    <!-- 任务行业查询 end -->
  </div>
</template>

<script>
  import ModuleTitle from "@/components/content/ModuleTitle.vue";

  import { createSign } from "@/utils/sign";
  import API from "@/network/api/smsApi";
  export default {
    name: "index",
    data() {
      return {
        rules: {
          account: [
            { required: true, message: '请输入账号', trigger: 'change' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' }
          ],
          rate: [
            { required: true, message: '请选择抽水比例', trigger: 'change' }
          ],
        },
        moduleTitle: "计数器工作室管理",
        formInline: {
          account: '',
          pageSize: 10,
          pageNum: 1
        },
        total: 0,
        tableData: [],
        dialogFormVisible: false,
        form: {
          account: '',
          password: '',
          rate: 0
        },
        formLabelWidth: '100px',
        loadingD: false,
        loading: false,
        dataRow: null,
        userid: {
          id: ''
        }
      };
    },
    created() {
      this.countList();
    },
    methods: {
      countList() {
        this.loading = true
        API.queryStudio(this.formInline).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          }
          this.loading = false
        })
      },
      onSubmit() {
        console.log('submit!');
        this.countList();
      },
      onReset () {
        this.formInline.account = '';
        this.countList();
      },
      createCount() {
        this.dialogFormVisible = true
      },
      submitCount (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loadingD = true
            this.dialogFormVisible = false
            API.addStudio(this.form).then(res => {
              console.log(res)
              if (res.data.data === true) {
                this.$message.success('创建成功')
                this.countList();
              } else {
                this.$message.error('创建异常')
              }
              this.loadingD = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      canelCount(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
      },
      handleCurrentChange(val) {
        console.log(val)
        this.formInline.pageNum = val;
        this.countList();
      },
      clickIndex(row, event, column) {
      this.dataRow = row
      console.log(this.dataRow);
    },
      resetChange () {
        this.userid.id = this.dataRow.id
        console.log(this.userid);
        API.resetPassword(this.userid).then(res => {
          console.log(res);
          console.log('重置密码成功');
        })
      }
    },
    components: { ModuleTitle }
  };
</script>

<style scoped>
  .card-title {
    color: #1074fd;
    font-size: 18px;
    margin-bottom: 14px;
  }

  /* 任务行业查询 */
  .trade-query-label {
    color: #1a1a1a;
    font-size: 18px;
  }
  .trade-query-input {
    width: 225px;
    height: 44px;
    margin-left: 10px;
    margin-right: 30px;
  }
  .trade-query-button {
    width: 64px;
    height: 40px;
    padding: 0;
    border-width: 0;
    background-color: #1074fd;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
  }

  /* 任务行业列表 */
  .list {
    position: relative;
    width: 48%;
    height: 356px;
    border: 1px solid #d9d9d9;
  }
  .list-header {
    display: flex;
    height: 50px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    line-height: 50px;
  }
  .list-body {
    display: flex;
    height: 51px;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    line-height: 50px;
  }
  .add-button {
    background-color: #1074fd;
    color: #ffffff;
    border: 1px solid #1074fd;
  }
  .stand-center {
    width: 100% !important;
  }
  .noneList {
    position: relative;
    width: 100%;
    height: 356px;
    margin: 0 auto 40px;
    text-align: center;
    line-height: 356px;
    font-size: 30px;
  }
</style>
